/*顶部滑入*/
.top-slide-enter-active {
    transition: all .3s ease;
}
.top-slide-leave-active {
    transition: all .2s ease;
}
.top-slide-enter,
.top-slide-leave-active {
    transform: translateY(-100%);
}
/*底部滑入*/
.bottom-slide-enter-active {
    transition: all .3s ease;
}
.bottom-slide-leave-active {
    transition: all .2s ease;
}
.bottom-slide-enter,
.bottom-slide-leave-active {
    transform: translateY(100%);
}
/*左边滑入*/
.left-slide-enter-active {
    transition: all .3s ease;
}
.left-slide-leave-active {
    transition: all .2s ease;
}
.left-slide-enter,
.left-slide-leave-active {
    transform: translateX(-100%);
}
/*右边滑入*/
.right-slide-enter-active {
    transition: all .3s ease;
}
.right-slide-leave-active {
    transition: all .2s ease;
}
.right-slide-enter,
.right-slide-leave-active {
    transform: translateX(100%);
}

/*公共遮罩*/
.common-mask-wrapper{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}
.common-mask-wrapper .common-mask-mask {
    min-width: 300px;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
} 

/*顶部Tab切换及搜索图标*/
.top-tab-bar-wrapper{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:62px;
}
.top-tab-bar{
  max-width:640px;
  min-width:300px;
  margin:0 auto;
  height: 62px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-left:30px;
  padding-right:20px;
  color: #fff;
  background-color:#76a6f0;
}
.top-tab-bar .top-tab{
  display:flex;
}
.top-tab-bar .top-tab .tab-item{
   font-size: 18px;
   margin-right: 15px;
   position: relative
}
.top-tab-bar .top-tab .tab-item.active::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-10px;
  width: 100%;
  height: 3px;
  background-color:#fff;
}
.top-tab-bar .iconfont{
  font-size:20px;
}

/*底部导航栏组件*/
.bottom-nav-wrapper {
    position: fixed;
    left: 0;
    right:0;
    bottom: -1px;
    z-index: 999;
}
.bottom-nav-wrapper .bottom-nav {
    box-sizing: border-box;
    min-width: 300px;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border-top: 1px solid #d9d9d9;
    background-color: rgba(255, 255, 255, 0.96);
    display: flex;
    padding-top: 8px;
    padding-bottom: 5px;
}
.bottom-nav-wrapper .bottom-nav li {
    flex: 1;
    line-height: 1;
    height: 100%;
    color: #999999;
    font-size: 0.625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bottom-nav-wrapper .bottom-nav li.active {
    color: #76a6f0;
}
.bottom-nav-wrapper .bottom-nav li .iconfont {
    line-height: 1;
    font-size: 21px;
    margin-bottom: 5px;
}

/*相关实拍图*/
.photo-swiper-wrapper{
    position: fixed;
    top:0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
} 
.photo-swiper-wrapper .photo-swiper{
    max-width: 640px;
    min-width: 300px;
    margin:0 auto;
    height: 100%;
    background-color:#000; 
    position: relative; 
}
.photo-swiper-wrapper .photo-swiper  li .swiper-slide-img{
    position: absolute;
    width: 100%;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.photo-swiper-wrapper .photo-swiper  li .swiper-slide-img img{
    width: 100%;
}
.photo-swiper-wrapper .photo-swiper .fav-btn{
   position: fixed;
   bottom: 35px;
   left: 50%;
   transform:translateX(-50%);
   width:50px;
   height:50px;
   border:7px solid #e6e6e6;
   background-color:#fff;
   border-radius:50%;
   line-height:54px;
   text-align: center;
   z-index: 2;
}
.photo-swiper-wrapper .photo-swiper .fav-btn .iconfont{
  font-size:30px;
  color:#ff906a;
}